<!-- 带小图的轮播图-->
<template name='imgsBanner'>
	<view class="imgsBannerBox">
		<swiper class="imgsBanner_swiper" :autoplay="autoplay" :interval="Number(interval)" :duration="Number(duration)"
			:current="comCurrentImg" @change="changeCurrent">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<navigator :url="`/pages/play/play?id=${item.id}`" style="width: 100%; height: 100%; background-color: #969696;">
					<image lazy-load :src="item.imageUrl"></image>
				</navigator>
				
			</swiper-item>
		</swiper>
		<!-- 图片位置 -->

		<scroll-view scroll-x="true" class="scrollImgBox" :scroll-left="scrollImgList" scroll-with-animation
			v-if="isShowSmallImgs">
			<view class="scrollImgList">
				<image lazy-load :src="item?.imageUrl" v-for="(item, index) in imgList" :key="index"
					:class="comCurrentImg == index ? 'activeImageItem' : ''" @click="onClickImg(index)"
					:id="'item' + index"></image>
			</view>
		</scroll-view>
		
		<view class="scroll-title">
			<view class="title-title">
				<view>{{imgList[comCurrentImg]?.name}}</view>
				<view class="title-tags">
					<text v-for="tag in imgList[comCurrentImg]?.tags">{{tag.name}}&nbsp;&nbsp;</text>
				</view>
			</view>
			<navigator :url="`/pages/play/play?id=${imgList[comCurrentImg]?.id}`" class="title-car">كۆرۈش</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'

	// Props
	defineProps({
		imgList: {
			type: Object,
			default: () => []
		},
		currentImg: {
			type: Number,
			default: 0
		},
		isShowSmallImgs: {
			type: Boolean,
			default: true
		},
		customizeDisplayField: {
			type: String,
			default: ''
		},
		autoplay: {
			type: Boolean,
			default: false
		},
		interval: {
			type: [Number, String],
			default: 5000
		},
		duration: {
			type: [Number, String],
			default: 500
		}
	})

	// Emits
	const emit = defineEmits(['change'])

	// 相关参数
	const comCurrentImg = ref(0);
	const scrollImgList = ref(0);
	const imgLeftList = ref([]);


	// 小图片点击
	function onClickImg(index) {
		// console.log("index:", index)
		comCurrentImg.value = index
		imgListScroll(index)
	}

	// 大图片滑动
	const changeCurrent = (e) => {
		// console.log(e);
		comCurrentImg.value = e.detail.current
		imgListScroll(e.detail.current)
	}

	// 小图片滑动
	const imgListScroll = (index) => {
		// console.log("图片滑动index:", index);
		if (index >= 3) {
			scrollImgList.value += 40
		} else {
			scrollImgList.value = 0;
		}

		// console.log("scrollImgList.value:", scrollImgList.value)
	}
</script>

<style lang="less" scoped>
	.imgsBannerBox {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.imgsBanner_swiper {
		width: 90%;
		height: 600rpx;
		padding: 30rpx 0;
		border-radius: 20rpx;
		overflow: hidden;

		swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;

			}
		}
	}

	.scrollImgBox {
		position: absolute;
		bottom: 100rpx;
		width: 90%;
		background-color: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20rpx);
		.scrollImgList {
			white-space: nowrap;

			image {
				width: 80rpx;
				height: 100rpx;
				margin-right: 16rpx;
				display: inline-block;
				border-radius: 10rpx;
				// border: 6rpx solid #fff;
			}

			image:last-child {
				margin-right: 16rpx;
			}

			image:first-child {
				margin-left: 16rpx;
			}

			// .activeImageItem {
			// 	// border: 6rpx solid #f57341;
			// 	height: 122rpx;
			// 	border-radius: 20rpx;

			// }
			.activeImageItem {
				height: 122rpx;
				width: 90rpx;
				border-radius: 20rpx;
				animation: pulse 1.2s ease-in-out infinite both;
			}

			@keyframes pulse {
				0% {
					transform: scale(1);
					border-color: #f57341;
					box-shadow: 0 0 12rpx transparent;
				}

				50% {
					transform: scale(1.03);
					border-color: #ff9d6f;
					box-shadow: 0 0 20rpx rgba(245, 115, 65, 0.6);
				}

				100% {
					transform: scale(1);
					border-color: #f57341;
					box-shadow: 0 0 12rpx transparent;
				}
			}
		}
		
	}
	.scroll-title{
		direction: rtl;
		position: absolute;
		bottom: 20rpx;
		width: 90%;
		background-color: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-title{
			padding:10rpx 20rpx;
			font-weight: bold;
			padding-right: 50rpx;
		}
		.title-tags{
			display: flex;
			font-size: 18rpx;
		}
		.title-car{
			background: rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(20rpx);
			padding: 8rpx 25rpx;
			border-radius: 30rpx;
			overflow: hidden;
			font-size: 22rpx;
			margin-left: 20rpx;
		}
	}
</style>